<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show指令测试</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--
    功能:
        使用v-show指令来控制元素是否显示.
    说明:
        1. 通过浏览器观察, 会发现其实是通过display属性节点来控制元素是否显示的.
        2. v-show接受boolean值, 也可以接受产生boolean值的表达式.
    -->
    <button v-on:click="buttonMessageChoose" v-text="buttonMessage"></button>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580545404549&di=8519ca28ff822fd453f7492c0bcc820c&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160506%2Fef10a11e89c345b48a3bd0fcfcdbbc2a_th.png" v-show="imgShowFlag" />
</div>
</body>
<script>

    let app = new Vue({
        el: '#app',
        data: {
            message: 'hello',
            imgShowFlag: true,
            buttonMessage: '隐藏'
        },
        methods: {
            buttonMessageChoose: function () {
                if(this.imgShowFlag) {
                    this.imgShowFlag = false;
                    this.buttonMessage = '显示';
                    return;
                }
                this.imgShowFlag = true;
                this.buttonMessage = '隐藏';
            }
        }
    });

</script>
</html>